<template>
  <el-dialog
    :visible.sync="visible"
    width="400px"
    center
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    :show-close="false"
    append-to-body
  >
    <p style="text-align:center;">
      拼命导入中（已完成{{ percentage }}%...）
      <br />
      感谢您的耐心等待
    </p>
    <el-progress :text-inside="true" :stroke-width="16" :percentage="percentage"></el-progress>
  </el-dialog>
</template>

<script>
  import { getProgressBar } from '@/api/base';
  export default {
    data() {
      return {
        visible: false,
        percentage: 0,
        timer: null,
        requestTag: '',
      };
    },

    methods: {
      async open(requestTag) {
        this.visible = true;
        if (requestTag !== '') {
          this.requestTag = requestTag;
          this.timer = setInterval(this.queryProgress, 1000);
        }
      },
      hide() {
        this.visible = false;
        this.requestTag = '';
        this.percentage = 0;
        clearInterval(this.timer);
      },
      async queryProgress() {
        const { data = 0 } = await getProgressBar(this.requestTag);
        this.percentage = data;
      },
    },
  };
</script>

<style></style>
